<template>
  <div>
    <input type="text" v-model="name1"> +
    <input type="text" v-model="name2"> =
    <span>{{ fullName }}</span>
    <button @click="changeName">改名</button>
<!--   
    <input type="checkbox" v-model='flag'>
    <input type="checkbox" v-model='flag1'> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      name1: '欧阳',
      name2: '霸天',
      flag1: true
    }
  },
  methods: {
    changeName() {
      this.fullName = 'harry-despot'
      // console.log(this.fullName);
    }
  },
  computed: {
    // 默认只配置了获取
    // fullName () {
    //   return this.name1 + '-' + this.name2
    // }

    // 既要获取又要设置，需要写完整写法
     fullName: {
       // get就是获取的方法
       // 在使用属性的时候会调用get方法
       get() {
         console.log('我是get方法我被调用了')
         return this.name1 + '-' + this.name2
       },
  
       // set就是设置属性的方法
       // 在设置属性的时候会调用set方法
       set(value) {
        console.log('我是set方法我被调用了')
        //就是想要替换成的值
        console.log(value);
  
        this.name1 = value.split('-')[0]
        this.name2 = value.split('-')[1]
       }
     }
    
    // flag: {
    //   get() {
    //     return true
    //   },

    //   set(value) {
    //     console.log(value);
    //     this.flag1 = value
    //   }
    // }
  }
}
</script>

<style>

</style>